<template>
	<view class="content">
		<image mode="widthFix" style="width: 100%;"
			src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/job_hunting/index/bg.png"
			class="bg-img"></image>
		<view class="welcome-box">
			<view class="welcome-text">Welcome</view>
			<view class="welcome-text" style="font-size:54rpx;font-weight:bold;">进入码上就业</view>
		</view>
		<view class="theme">
			<view class="agreement-block">
				<checkbox-group @change="checkChange">
					<checkbox color="#FF7626" id="check" class="checkbox" /><label for="check"
						class="radio-label">我已阅读并同意<text class="agreement" @click="navigate('/page_other/user/law')">
							《用户服务协议》</text><text class="agreement"
							@click="navigate('/page_other/user/privacy')">《个人信息保护政策》</text>，未注册的手机号将自动完成注册</label>
				</checkbox-group>
			</view>
			<view>
				<button size="mini" type="primary" class="entrance1" open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber">手机号码一键登录</button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		setStorage
	} from "@/util/auth.js";
	import {
		savePhoneNumberByCode
	} from '@/api/user.js'
	import {
		getWxLoginCode
	} from '@/util/user.js'
	import {
		validate
	} from '@/util/validate.js'
	export default {
		data() {
			return {
				form: {
					checked: [],
					type: '',
					phoneInfo: '',
					userCode: ''
				},
				rules: {
					checked: {
						name: '',
						required: false,
						validator: function(value, form, callback) {
							if (value.length == 0) {
								callback('请勾选同意协议！');
							}
							callback();
						}
					},
				},
			}
		},
		methods: {
			checkChange(e) {
				this.form.checked = e.detail.value;
			},
			navigate(url) {
				uni.navigateTo({
					url
				})
			},

			getOpenId() {
				if (!this.$store.getters.token) {
					getWxLoginCode().then((code) => {
						uni.showLoading({
							title: '加载中',
							mask: true,
						})
						this.$store.dispatch('user/getWxLoginCode', code).catch(() => {
							uni.showModal({
								title: '提示',
								content: '获取信息失败，请尝试重新进入小程序，否则功能无法正常使用',
							})
						})
					})
				}
			},
			getPhoneNumber(e) {
				if (validate(this.form, this.rules)) {
					if (!e.detail.code) {
						return;
					}
					uni.showLoading({
						title: '登录中'
					})
					savePhoneNumberByCode({
						code: e.detail.code
					}).then(res => {
						if (res) {
							this.showToast('登录成功');
							setStorage('user', res, 600000);
							this.jump()
						} else {
							this.showToast('登录失败');
						}
					})
				}
				
			},
			jump() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		},
		onLoad() {
			this.getOpenId()
		},

	}
</script>

<style lang="scss">
	page {
		background: #FAFAFA;
	}

	.content .bg-img {
		width: 100%;
		position: absolute;
		top: 0;
	}

	.content .welcome-box {
		width: 85%;
		padding: 30rpx 0 0 7.5%;
		position: relative;

		.welcome-text {
			font-size: 36rpx;
			color: #fff;
			padding: 10rpx 0;
		}
	}



	.content .theme {
		margin-top: 100rpx;
		background: #fff;
		width: 100%;
		position: absolute;
		border-radius: 50rpx;

		.agreement-block {
			width: 100%;
			margin-top: 40rpx;
			display: flex;
			flex-direction: row;
			padding: 30rpx;

			.radio-label {
				font-size: 24rpx;

				.agreement {
					color: #FB093B;
				}
			}

			.checkbox {
				transform: scale(0.7);
			}
		}

		.entrance1 {
			width: 75%;
			height: 100rpx;
			margin: 50rpx auto;
			background-color: #fff;
			border-radius: 36rpx;
			background-color: #FB093B;
			color: #fff;
			overflow: hidden;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			position: relative;
		}

		.entrance2 {
			width: 75%;
			height: 100rpx;
			margin: 5rpx auto;
			// background-color: #fff;
			border-radius: 36rpx;
			border: 1rpx solid #999;
			// box-shadow: 0px 0px 4px #ccc;
			overflow: hidden;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			position: relative;
		}
	}
</style>
